<template>
<div>
    <el-row>
      <el-col :span="24">
        <!-- 删除过程中，不允许其他操作 -->
        <!-- <el-button v-if="!showDeleteCheckbox" type="primary" @click="updateTableItem()">新增</el-button>
        <el-button v-if="!showDeleteCheckbox" @click="showDeleteCheckbox = true;" type="danger">删除</el-button> -->
        <!-- 删除过程中，只出现确认删除按钮 -->
        <el-button v-if="showDeleteCheckbox" @click="deleteTableItem();showDeleteCheckbox = false;chosenItem;" type="danger">确认删除</el-button>
        <el-button v-if="showDeleteCheckbox" @click="showDeleteCheckbox = false;">取消</el-button>
      </el-col>
    </el-row>
    <el-table stripe :data="tableData" style="border: 1px solid #ebebeb;border-radius: 3px;margin-top: 10px;">
      <el-table-column prop="tsId" label="id" width="50">
        <template slot-scope="scope">
          <!-- el-checkbox 多选框，checked 绑定是否选中，click 绑定点击事件 -->
          <el-checkbox v-if="showDeleteCheckbox" 
          :checked="chosenItem.indexOf(scope.row.tsId) > -1"
           @change="toggleChosenItem(scope.row.tsId)"
            style="margin-right: 5px;"></el-checkbox>
          <span>{{scope.row.sId}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cTime" label="上课时间" width="100"></el-table-column>
      <el-table-column prop="xTime" label="下课时间" width="100"></el-table-column>
      <el-table-column prop="crName" label="教室" width="100"></el-table-column>
      <el-table-column prop="courseName" label="课程" width="100"></el-table-column>
      <el-table-column prop="className" label="班级" width="100"></el-table-column>
      <el-table-column prop="yingDao" label="应到人数" width="100"></el-table-column>
      <el-table-column prop="shiDao" label="实到人数" width="100"></el-table-column>
      <el-table-column prop="chiDao" label="迟到" width="100"></el-table-column>
      <el-table-column prop="zaoTui" label="早退" width="100"></el-table-column>
      <el-table-column prop="kuangKe" label="旷课" width="100"></el-table-column>
       <el-table-column prop="qingJia" label="请假" width="100"></el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
        
     
          <el-button :disabled="showDeleteCheckbox" 
          @click="deleteTableItem(scope.row.sId)"
           type="danger" size="small">删除</el-button>
         
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
//import tableData from './sdata';

// 下面是 Vue 组件
export default {
  data() {
    return {
      tableData:[], // tableData: tableData 的简写
      dialogFormVisible: false, // 弹窗是否出现
      showDeleteCheckbox: false, // 是否批量删除
      chosenItem: [], // 选中的选项
    };
  },
   created() {
     this.getrecordList();
  },
  methods: {
   getrecordList  ()  {
      console.log('连接后端')
      this.axios({
        method: "get",
        url: "http://localhost:8080/timeSheet"
      }).then(res => {
        this.tableData = res.data;
        console.log('获取数据成功')
      });
    },
    // 新增一个数据
    // updateTableItem(sId = 0) {
    //    // 跳转到编辑页面，新增则传id为0，否则为编辑
    //     console.log(sId)
    //     this.$router.push({name: 'Sadd',params:{sId}})
      
    // },
    updateTableItem(item = {}){
      // 检查是否有 id，有则更新，没有则新增
      if(item.id !== undefined){
        // 更新值
        let itemIndex = this.tableData.findIndex(x => x.id === item.id);
        if(itemIndex > -1){
          // Vue 中数组更新不能直接使用 array[index] = xxx; 的方式，可以参考https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
          this.tableData.splice(itemIndex, 1, {...item});
        }
      }else{
        // 添加到列表中，同时自增 id 
        this.tableData.push({...item, id: this.tableData.length + 1});
      }
    },
       // 删除一个数据
    deleteTableItem(sId) {
      console.log("连接删除后端"); 
      console.log(sId)                          
      this.axios({
        method: "delete",
        url: "http://localhost:8080/timeSheet"+tsId,
        
        
      }).then(() => {
        this.class_sheet(),
        console.log("删除数据1111111");
      });
    },
   
    // 切换选中的选项
    toggleChosenItem(id){
      const index = this.chosenItem.findIndex(x => x.id === id);
      if(index > -1){
        // 有该选项则删除
        this.chosenItem.splice(index, 1);
      }else{
        // 无该选项则添加
        this.chosenItem.push(id);
      }
    },
    // 提交新增/修改表单
    submitForm(){
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          this.dialogFormVisible = false; 
          this.updateTableItem(this.form);
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
